<script setup lang="ts">
import {reactive, ref, watch,computed,watchEffect,provide,onMounted} from "vue";
import {store, store0, store1, store2, storeIndex} from "@/store/storemusic";
import axios from "axios";
import ChildBoth from "@/Components/ChildBoth.vue";
import LeftList from "@/Components/LeftList.vue";
import SongBottom from "@/Components/SongBottom.vue";
import RightUserPhoto from "@/Components/RightUserPhoto.vue";
import UndoRedoSearch from "@/Components/UndoRedoSearch.vue";
import router from "@/Router";
import {useRoute} from "vue-router";
import {findSongsByStyle} from "@/Network/songApi";
import SongList from "@/Components/SongList.vue";

const route = useRoute()
const pageName = ref("ItemRecPage")
//如果没有进行路由传参：也就是说是直接通过网址进来的，
// 那么route.query.style为undefined， 那么就给他预设值为“民歌”
let rec= ref(route.query.rec?route.query.rec:"为你推荐")

</script>

<template>
  <child-both></child-both>
  <song-bottom class="pl-30 pr-35" :pageName="pageName" :styleName="style"></song-bottom>
  <div class="body flex">
    <left-list></left-list>
    <div class="main grow h-200 flex flex-col overflow-auto pb-15 mx-3 ">
      <undo-redo-search></undo-redo-search>
      <div class="mt-20 mb-5 pl-5 pr-5 z-10 h-10 text-3xl font-bold text-blue">
        {{rec}}
      </div>
      <song-list class="px-10 ml-2" :pageName="pageName" :recName="rec"></song-list>

    </div>
    <right-user-photo></right-user-photo>
  </div>




  <!--  <ul class=" flex flex-col gap-2 w-full pl-5 pr-5 pb-20">
      <li v-for="(item, index) in store.songList"
          @click="store.current=index"
          class="h-30 flex justify-between items-center hover:bg-[#ccdfdc] ">

        <div class="song-and-info flex gap-5 justify-center items-center">
          <img :src=item.songPic class="w-25">
          <p class="text-cyan-6 font-600">{{ item.songName }}</p>
        </div>
        <p class="text-gray-6">{{ item.singer }}</p>
        &lt;!&ndash;      <p>{{store.songUrl[index]}}</p>&ndash;&gt;
        <div @click="deleteSong(index)">
          <img @click="sendDataToParent" src="../img/love.png " class="w-25 hover:w-28">
        </div>

      </li>
    </ul>-->

</template>

<style scoped>
div::-webkit-scrollbar {
  display: none;
}
</style>